<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物空间</title>
    <script src="../JS/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="../CSS/教师页面渲染.css">
</head>

<body>
    <!-- 头部标题 -->
    <div class="head">

        <span>空间</span>
    </div>
    <!-- 内容页 -->
    <div id="content" class="content">
        <!-- 左侧导航栏 -->
        <div class="nav-left"  :class="{nav_left_show:!open}">
  
                <ul>
                    <span @click="collapse">|||</span>
                    <button @click="webChange" data-id="1">&#935;宠物列表</button>
                    <button @click="webChange" data-id="2">&#933;宠物图鉴</button>
                    <button @click="webChange" data-id="3">&#918;捕捉计划</button>

                </ul>

            
        </div>
        <!-- 右侧内容页 -->
        <div class="container">
            <!-- 基本信息页，可以采用路由的形式来更改页面 -->
            <div v-if="tab==1" class="content1" :class="{content1_show:!open}">

                <div class="c-nav" id="num02">
                    <span>Search  pokmen:</span>
                    <input type="text" placeholder="请输入你要查找的宠物" v-model="keyword">    
                    
                </div>
                <table class="table1">
                    <caption>宠物资料<button class="addbtn" @click="ifDialogShow= true">添加</button></caption>
                    <thead>
                        <tr>
                            <th>代号</th>
                            <th>姓名</th>
                            <th>属性</th>
                            <th>战斗力
                                <i @click="sortType=2">&and;</i>
                                <i @click="sortType=1">&or;</i>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="p in dataShow" :key="p.id">
                            <td>{{p.id}}</td>
                            <td>{{p.name}}</td>
                            <td>{{p.sex}}</td>
                            <td>{{p.age}}</td>
                            <td>
                                <button class="change" v-on:click="changeUser(p.id)">修改</button>
                                <button class="delete"v-on:click="delUser(p.id)">删除</button>
                            </td>
                        </tr>
                        <tr></tr>
                    </tbody>
                </table>
                <!-- 分页控制 -->
                <div class="bottom">
                    <table>
                        <tr>
                            <td>
                                <a href="#" @click="prePageFirst">首页</a>
                                <a href="#" @click="prePage">上一页</a>

                                <span v-for="(item, index) in pageNum">
                                    <a href="#" @click="toPage(index)" :class="{active: currentPage==index}"> &nbsp;
                                        {{ index+1 }}
                                    </a>
                                </span>
                                <a href="#" @click="nextPage">下一页</a>
                                <a href="#" @click="prePageLast">末页</a>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- 添加弹窗 -->
            <div class="modal" v-if=ifDialogShow>
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="mb_revise">
                            <p>添加</p><br>
                            <span class='cha' @click="cha">×</span>
                            <span>代号</span>
                            <input type="text" class="xiugai" v-model='id'><br>
                            <span>姓名</span>
                            <input type="text" class="xiugai" v-model='name'><br>
                            <span>属性</span>
                            <input type="text" class="xiugai" v-model='sex'><br>
                            <span>战斗力</span>
                            <input type="text" class="xiugai" v-model='age'>
                        </div>
                        <button class="determine" @click="adduser()">添加</button>
                        <button class="cancen" @click="ifDialogShow= false">返回</button>
                    </div>
                </div>
            </div>
            <!-- 修改弹窗 -->
            <div class="dialog" v-if=isshow>
                <div class="modal-content2">
                    <div class="modal-body2">
                        <div class="mb_revise2">
                            <p>修改</p><br>
                            <span class="chaone" @click="chaone">×</span>
                            <span>姓名</span>
                            <input type="text" class="xiugai" v-model="dia.name"><br>
                            <span>属性</span>
                            <input type="text" class="xiugai" v-model="dia.sex"><br>
                            <span>战斗力</span>
                            <input type="text" class="xiugai" v-model="dia.age">
                        </div>
                        <button class="cancen2" @click="queren()">确认</button>
                    </div>
                </div>
            </div>


            <!-- 科研情况页 -->
            <div v-if="tab==2" class="content2" >
                <!-- 视频引入 --> 
                
             
                <div class="showImg">
              <!-- <div class="showImg"> -->
                  <!-- 轮播图片 -->
                  <img  @mouseover="changeInterval(true)" 
                            @mouseleave="changeInterval(false)"
                         v-for="(item,id) in imgArr" 
                         :key="item.id"
                        :src="item.img" 
                        alt="暂无图片"
                        v-show="item.id ===currentIndex">  
                <!-- 左侧按钮 -->
                  <div  class="iconDiv icon-left">
                   <span @click="clickIcon('up')">&lt;</span>
                 </div> 
              <!-- 右侧按钮--> 
                <div  class="iconDiv icon-right">
                 <span @click="clickIcon('down')">&gt;</span>
                </div> 
                <div class="swipe_title" v-for="(item,index) in imgArr" v-show="index===currentIndex" :key="index">
                    {{item.title}}
                </div>
            <!-- 控制圆点 -->
          <div class="banner-circle">
                <ul>
                    <li @click="changeImg(item.id)"
                    v-for="(item,id) in imgArr"
                    :key="item.id"
                    :class="item.id ===currentIndex?'active1':''"
                    ></li>
                </ul>
            </div>
            
        </div> 
     
    </div>
            <!-- 教学日历 -->
            <div v-if="tab==3" class="content3">
                <!-- 视频引入 -->
                <div class="video">
                    <button @click="playPause()">播放/暂停</button>
                    <video id="video1"  controls ref="v" :src="src" type="video/mp4">
                    </video><br>
                
                
                
                
                </div>
                
                <!-- 地区的选择 -->
              <div class="select">
                  <span>今日出发地点</span>
                <select v-model="sheng">
                    <option disabled value="">请选择地区</option>
                    <option v-for="shengs of base_citys" :value="shengs.name" :label="shengs.name"></option>
                </select>
                <select v-model="shi" v-if="this.shi_citys.length > 1">
                    <option disabled value="">请选择市</option>
                    <option v-for="shi of shi_citys" :value="shi.name" :label="shi.name"></option>
                </select>
                <select v-model="xian_qu">
                    <option disabled value="">请选择县/区</option>
                    <option v-for="qu of qu_citys" :value="qu.name" :label="qu.name"></option>
                </select>

              </div>
              <!-- 日历控件 -->
            <div class="calendar" ref="calendar">
                    <!-- 年份  月份 -->
                    <span>日历</span>
                <div class="month">
                    <ul>
                        <!--点击会触发pickpre函数，重新刷新当前日期  -->
                        <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
                        <li class="year-month">
                            <!-- <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth}}月</span>
                            <span>{{currentDay}}日</span> -->
                            <input type="text" v-model="currentYear" 
                            @keydown.enter="initData(formatDate(currentYear, currentMonth, currentDay))">年
                            <input type="text" v-model="currentMonth" 
                             @keydown.enter="initData(formatDate(currentYear, currentMonth, currentDay))">月
                            <input type="text" v-model="currentDay" class="day"
                             @keydown.enter="initData(formatDate(currentYear, currentMonth, currentDay))">日
                        </li>
                        <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
                    </ul>
                </div>
                    <!-- 星期 -->
                <ul class="weekdays">
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                    <li>日</li>
                </ul>
                <!-- 日期显示 -->
                <ul class="days">
                    <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                    <li v-for="dayobject in days" @click="changeDay(dayobject)" :key="dayobject.id"
                        :class="[{'other-month':!dayobject.isThisMonth},
                        {'active':dayobject.isThisDay},
                        {'this-month':dayobject.isThisMonth}]">
                        <span>{{ dayobject.day.getDate() }}</span>
                    </li>
                </ul>
                </div>

            </div>
        </div>
        <!-- 以上是内容展示页 -->
        
    </div>
    <!-- 底部 -->
    <div class="low">
        <span>Pokmen&trade;</span>
    </div>
    <script>
        Vue.config.devtools = true;
         
        const persons = [
            { id: 101, name: '喷火龙', sex: '火', age: 2509 },
            { id: 202, name: '杰尼龟', sex: '水', age: 1043},
            { id: 303, name: '胖丁', sex: '未知', age: 2000},
            { id: 404, name: '可达鸭', sex: '水', age: 4380},
        { id: 505, name: '皮卡丘', sex: '电', age: 6666 },
           { id: 606, name: '甲贺忍蛙', sex: '水', age: 2313 },
              { id:707, name: '妙蛙种子', sex: '草', age: 1323 },
                 { id: 808, name: '梦幻', sex: '位置', age: 9999 },
        ]
        const vm = new Vue({
            
            el: "#content",
            data() {
                return {
                    persons: persons,
                    keyword: '',
                    tab: 1,
                    sortType: 0,//控制排序
                    ifDialogShow: false,
                    // 控制弹窗
                    isshow: false,
                    // 添加信息
                    dia: {},
                    name: '',
                    sex: '',
                    id: '',
                    age: '',
                    // 控制分页
                    conpages: '',
                    currentPage: 0,
                    pageSize: 4,
                    // 控制视频
                    src: '../img/视频.mp4',

                    // 控制轮播图
                    currentIndex:0,
                    timer:null,
                    imgArr:[
                        {
                            id:0,
                            title:'皮卡丘',
                            img:'../img/1.jpg'
                        },
                        {
                            id:1,
                              title: '甲贺忍蛙',
                            img:'../img/9.jpg'
                        },
                        {
                            id:2,
                              title: '神兽',
                            img:'../img/11.jpg'
                        }, 
                        {
                            id:3,
                              title: '喷火龙',
                            img: '../img/10.jpg'
                        }

                    ],
                  
                    //控制三联动联动选择
                    sheng: "",
                    shi: "",
                    xian_qu: "",
                    base_citys: [],
                    shi_citys: [],
                    qu_citys: [],
                    // 日历的属性
                    currentDay:'',
                    currentMonth:'' ,
                    currentYear: '',
                    currentWeek: 1,
                    days: [],
                    yearList: [],
                        open:true
                }
            },
            created:function(){
                var d=new Date()
                this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,d.getDate()))
            },
            mounted() {
                this.startInterval(),
                  this.handleGetCitys()
                //   this.isApp()
            },
            methods: {
                  collapse() {
                    this.open = !this.open;
                },
                // 页面的跳转，切换到不同的块元素
                webChange: function (e) {

                    let tabid = e.target.dataset.id
                    this.tab = tabid
                },
                // 删除
                delUser(id) {

                    var index = this.persons.findIndex(p => {
                        if (p.id == id) {
                            return true
                        }
                    })

                    this.persons.splice(index, 1)
                },
                //添加
                adduser() {
                    var sname = this.name;
                    var ssex = this.sex;
                    var sid = this.id;
                    var sage = this.age;
                    // this.user.id=this.persons[this.persons.length-1].id+1;
                    this.persons.push({ id: sid, name: sname, sex: ssex, age: sage })
                    this.ifDialogShow = false;
                    this.name = this.age = this.sex = this.id = "";
                },
                // 修改用户
                changeUser(id) {
                    const result = this.persons.find(item => item.id === id);
                    this.dia = { ...result }

                    // 当点击编辑按钮时讲所要提交的表单显示出来
                    this.isshow = true
                },
                queren() {
                    //也就是把update中的内容再重新赋值回到this.users
                    let result = this.persons.find(item => item.id === this.dia.id)
                    result.name = this.dia.name
                    result.age = this.dia.age
                    result.sex = this.dia.sex
                    this.isshow = false
                },
                playPause(){
                     var vid=this.$refs.v;
                    if (vid.paused)
                        vid.play();
                    else
                        vid.pause();
                },
            
                // 关闭弹窗
                cha() {
                    this.ifDialogShow = false
                },
                chaone() {
                    this.isshow = false
                },
                // 分页控制
                prePageFirst: function () {//首页
                    var vm = this;
                    vm.currentPage = 0;
                },
                nextPage: function () {//下一页
                    var vm = this;
                    if (vm.currentPage == vm.pageNum - 1) return;
                    vm.currentPage++;

                },
                prePage: function () {//上一页
                    var vm = this;
                    if (vm.currentPage == 0)
                        return;
                    vm.currentPage--;

                }, prePageLast: function () {//末页
                    var vm = this;
                    vm.currentPage = vm.pageNum - 1;
                },
                toPage: function (page) {
                    var vm = this;
                    vm.currentPage = page
                },
                // 开启定时器
                startInterval() {
				// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
                clearInterval(this.timer);
                this.timer=setInterval(()=>{
                    this.currentIndex++;
                    if(this.currentIndex>this.imgArr.length-1){
                        this.currentIndex=0
                    }
                },3000)
                },//控制两侧页面的箭头
                clickIcon(val){
                if(val==='down'){
                    this.currentIndex++;
                    if(this.currentIndex==this.imgArr.length){
                        this.currentIndex=0;
                    }
                }else{
                    if(this.currentIndex===0){
                        this.currentIndex=this.imgArr.length;

                    }
                    this.currentIndex--;
                }
                },//控制圆点
                changeImg(index){
                    this.currentIndex=index;
                },
                changeInterval(val){
                    if(val){
                        clearInterval(this.timer)
                    }else{
                        this.startInterval()
                    }
                },
                //控制三联动
                 async handleGetCitys() {
                    const { data, status } = await axios.get('../JS/citys.json');

                    this.base_citys = data;

                },
                // 控制省
                handleSheng() {
                    this.shi_citys = [];
                    this.qu_citys = [];

                    if (this.base_citys.length > 0) {

                        this.base_citys.forEach(item => {

                            if (this.sheng === item.name) {

                                this.shi_citys = Object.assign([], item.child);
                                this.shi = this.shi_citys[0].name;
                            }
                        });
                    }
                },
                // 控制市
                handleShi() {
                    if (this.shi_citys.length > 0) {
                        this.shi_citys.forEach(item => {
                            if (this.shi === item.name) {
                                this.qu_citys = Object.assign([], item.child)
                                this.xian_qu = this.qu_citys[0].name;
                            }
                        })
                    }
                },
                // 初始化日期
               initData: function (cur) {
                    this.days = []; //数据初始化
                     var date = new Date(cur);
                    this.currentDay = date.getDate();
                    this.currentYear = date.getFullYear();
                    this.currentMonth = date.getMonth() + 1;
                    this.currentWeek = date.getDay(); // 1...6,0
                    if (this.currentWeek == 0) this.currentWeek = 7; // 今天是周日，放在第一行第7个位置，前面6个
                    var thisMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate() //当月总天数
                    var thisMonthFirstDayIsWeeks = new Date(this.currentYear, this.currentMonth - 1, 1)
                        .getDay() == 0 ? 7 : new Date(this.currentYear, this.currentMonth - 1, 1)
                            .getDay() //当月第一天是周几，周日是0
                    var thisMonthLastDayIsWeeks = new Date(this.currentYear, this.currentMonth - 1,
                        thisMonthDays).getDay() == 0 ? 7 : new Date(this.currentYear, this
                            .currentMonth - 1, thisMonthDays).getDay() //当月最后一天是周几

                    // console.log("thisMonthDays:",thisMonthDays,";","thisMonthFirstDayIsWeeks:",thisMonthFirstDayIsWeeks,";","thisMonthLastDayIsWeeks:",thisMonthLastDayIsWeeks,";")
                    //上一个月
                    if (thisMonthFirstDayIsWeeks != 1) { //当月的第一天不是周一，需要补全前面的（上一个月的）天数
                        var y = this.currentMonth == 1 ? this.currentYear - 1 : this.currentYear
                        var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1
                        var d = new Date(y, m, 0).getDate() //上一个月总天数
                        for (let i = 0; i < thisMonthFirstDayIsWeeks - 1; i++) { //判断上一个月是不是前一个年的最后一个月
                            var newD = new Date(y, m - 1, d - (thisMonthFirstDayIsWeeks - (i + 2)))
                            var dayobject = {};
                            dayobject.day = newD;
                            dayobject.isThisMonth = false
                            dayobject.isThisDay = false
                            this.days.push(dayobject);
                        }
                    }
                    //当前月
                    for (var i = 0; i < thisMonthDays; i++) {
                        var newD = new Date(this.currentYear, this.currentMonth - 1, i + 1)
                        var dayobject = {};
                        dayobject.day = newD;
                        dayobject.isThisMonth = true
                        dayobject.isThisDay = i + 1 == this.currentDay
                        this.days.push(dayobject);
                    }
                    //下一个月
                    if (thisMonthLastDayIsWeeks != 7) {
                        for (let i = 0; i < 7 - thisMonthLastDayIsWeeks; i++) { //判断下一个月是不是下一年的第一个月
                            var newD = new Date(this.currentMonth == 11 ? this.currentYear + 1 : this
                                .currentYear, this.currentMonth == 11 ? 0 : this.currentMonth, i + 1)
                            var dayobject = {};
                            dayobject.day = newD;
                            dayobject.isThisMonth = false
                            dayobject.isThisDay = false
                            this.days.push(dayobject);
                        }
                    }
                },
                pickPre: function (year, month) {

                    if (month == 1) {
                        month = 12
                        year = year - 1
                    } else {
                        month = month - 1
                    }
                    this.initData(this.formatDate(year, month, 1));
                },
                pickNext: function (year, month) {
                    if (month == 12) {
                        month = 1
                        year = year + 1
                    } else {
                        month = month + 1
                    }
                    this.initData(this.formatDate(year, month, 1));
                },
               
                formatDate: function (year, month, day) {
                    var y = year;
                    var m = month;
                    // if (m < 10) m = "0" + m;
                    var d = day;
                    // if (d < 10) d = "0" + d;
                    var data = y + "-" + m + "-" + d
                    return data
                },
                changeDay(dayobject) {
                    const dayDetail = dayobject.day
                    return dayDetail
                },
            
                
            },
            computed: {
                // 表格遍历的计算
                dataShow: function () {  
                     let start = this.currentPage * this.pageSize;
                    let end = Math.min((this.currentPage + 1) * this.pageSize, this.persons.length)
                    // 需要排序并且不需要搜索，先将数据排序，再返回给datashow
                    if(this.sortType !=0 && this.keyword==''){
                       
                        const arr=this.persons;
                        arr.sort((p1, p2) => {
                        return this.sortType===1?p2.age-p1.age:p1.age-p2.age
                    })
                    return arr.slice(start, end);
                }
                //不需要排序也不搜索，就直接显示原来数组的内容
                    else if (this.keyword == ''&& this.sortType==0) {
                        return this.persons.slice(start, end)
                    } 
                    // 搜索的话就直接显示结果，不排序了
                    else {
                        return this.persons.filter((p) => {
                            return p.name.indexOf(this.keyword) !== -1
                        })
                    }
                   
                

                },
                pageNum: function () {
                    return Math.ceil(this.persons.length / this.pageSize) || 1;
                },
            
            },          
            watch:{
                 sheng: function () {
                    this.handleSheng()
                    this.handleShi()
                },
                shi: function () {
                    this.handleShi()
                }
            },
            
    
        })
    </script>

</body>

</html>